<template>
  <div ref="xianMap" style="width: 100%; height: 1000px"></div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      mapData: {},
    };
  },
  computed: {
    options() {
      return {
        geo:{
            type:'map',
            map:'xian',
            zoom:2,
            roam:true,
            label:{
                show:true
            }
        },
        visualMap:{
            min:8000,
            max:100000,
            inRange:{
                color:['yellow','red']
            }
        },
        series: [
          {
            name: "西安市2023年全市GDP排名",
            type: "map",
            geoIndex: 0,
            data: [
              { name: "未央区", value: 28000 },
              { name: "碑林区", value: 79000 },
              { name: "莲湖区", value: 59000 },
              { name: "雁塔区", value: 89000 },
              { name: "灞桥区", value: 29000 },
              { name: "新城区", value: 19000 },
              { name: "长安区", value: 39000 },
              { name: "周至县", value: 8000 },
              { name: "蓝田县", value: 2000 },
            ],
          },
        ],
      };
    },
  },
  watch:{
    mapData:{
        handler(newval){
            echarts.registerMap('xian',newval)
            this.chart.setOption(this.options)
        }
    }
  },
  methods: {
    async getXianMap() {
      const result = await axios.get(
        "https://geo.datav.aliyun.com/areas_v3/bound/610100_full.json"
      );
      this.mapData = result.data;
    },
  },
  created() {
    this.getXianMap();
  },
  mounted() {
    this.chart = echarts.init(this.$refs.xianMap);
  },
};
</script>

<style>
</style>